//
//  CategoryCard.swift
//  Keep1
//
//  Created by 王志涛 on 2021/1/19.
//

import SwiftUI

let borderColor = Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.2)
let screenWidth = UIScreen.main.bounds.width

struct CategoryCard: View {
    
    let titleColor : Color
    let titleName: String
    
    var body: some View {
            VStack {
                ZStack{
                    HStack{
                        Text(titleName)
                            .bold()
                            .categoryNameFormat()
                        Spacer()
                    }
                    .background(titleColor)
                }
                Spacer()
                CategoryCell()
                Spacer()
                CategoryCell()
                Spacer()
                CategoryCell()
                Spacer()
                ZStack{
                    Text("查看更多年龄分类")
                        .bold()
                        .frame(width: screenWidth - 15,height: 42)
                        .border(borderColor, width: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/)
                }
            }
            .cardStyle()
    }
}

struct CategoryCard_Previews: PreviewProvider {
    
    static var previews: some View {
        let purple = Color(.sRGB, red: 103/255, green: 58/255, blue: 183/255)
        let orange = Color(.sRGB, red: 255/255, green: 156/255, blue: 0/255)
        Group{
            CategoryCard(titleColor: purple, titleName: "年龄分类")
                .previewDevice("iPhone 8")
            CategoryCard(titleColor: orange, titleName: "目标分类")
                .previewDevice("iPhone 12")
        }
        
    }
}


struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(width: screenWidth - 30, height: 376)
            .background(Color(.white))
            //这个height设置为固定的，在iPhone12 上的高度就很奇怪。可不可以设置成灵活的height?
            .cornerRadius(20)
            .overlay(RoundedRectangle(cornerRadius: 20)
                        .stroke(borderColor,lineWidth: 2))
            .padding(.horizontal)
    }
}

struct CategoryNameFormat: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title2)
            .foregroundColor(.white)
            .padding()
            .frame(height:67)
    }
    
}

extension View {
    func cardStyle() -> some View {
        modifier(CardStyle())
    }
    func categoryNameFormat() -> some View {
        modifier(CategoryNameFormat())
    }
}
